<script lang="ts" setup>
const props = withDefaults(defineProps<{
  list: Array<number>
  title?: string
}>(), {
  list: () => [],
  title: '课次',
})
</script>

<template>
  <view>
    <view class="text-14px text-gray">
      {{ title }}({{ list.length }}次)
    </view>
    <view class="flex flex-wrap">
      <view v-for="(item, index) in props.list" :key="index" class="item">
        第{{ item }}次课
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .item {
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    font-size: 13px;
    color: #1D2129;
    margin-top: 16rpx;
    line-height: 1;
    &:not(:nth-child(4n)) {
      border-right: 1px solid #E5E6EB;
    }
  }
</style>
